<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>教师信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: #00499e;
        }
        #app {
            padding: 20px;
            background: white;
            border: 15px solid #00499e;
            border-radius: 25px;
            max-width: 650px;
            margin:auto;
        }
        
        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 20px;
            font-size: 16px;
            text-align: center;
        }
        
        .form-select {
            width: 100%;
        }

        .form-input {
            width: 100%;
        }

        #app .form-date {
            width: 100%;
        }

        .form-btn {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="page-header" style="font-weight: bold;">
        <i style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;" @click="back"
           class="el-icon-back"></i>
        <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>{{title}}</div>
    <el-row :gutter="20">
        <el-form ref="form" label-width="80px" label-position="right" :model="formData" :rules="rules">
            <el-col :span="24">
                <el-form-item prop="qxdm" :label="formMap['qxdm']">
                    <el-cascader
                            :disabled="disabled"
                            :show-all-levels="false"
                            class="form-select"
                            v-model="formData.qxdm"
                            placeholder="请选择所属区县"
                            @change="handleChange"
                            :options="types.qxdms"
                            :props="{label: 'dmmc', value: 'dmdm', emitPath: false}"></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="xxdm" :label="formMap['xxdm']">
                    <el-select :disabled="disabled || !formData.qxdm" class="form-select" v-model="formData.xxdm" placeholder="请选择所属学校">
                        <el-option v-for="xx of types.xxdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="xm" :label="formMap['xm']">
                    <el-input :disabled="disabled" v-model="formData.xm" class="form-input" type="text" placeholder="请输入姓名"
                              maxlength="20"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="shouji" :label="formMap['shouji']">
                    <el-input :disabled="disabled" v-model="formData.shouji" class="form-input" type="text" placeholder="请输入手机号"
                              maxlength="20"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="rjkcdm" :label="formMap['rjkcdm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.rjkcdm" placeholder="请选择任教课程">
                        <el-option v-for="xx of types.kcdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="xxzwdm" :label="formMap['xxzwdm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.xxzwdm" placeholder="请选择学校职务">
                        <el-option v-for="xx of types.zwdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="zcdm" :label="formMap['zcdm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.zcdm" placeholder="请选择职称">
                        <el-option v-for="xx of types.zcdms" :key="xx.dmmc" :value="xx.dmdm"
                                   :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="csrq" :label="formMap['csrq']">
                    <el-date-picker :disabled="disabled" v-model="formData.csrq" value-format="yyyy-MM-dd" class="form-date" placeholder="请选择出生日期"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="xddm" :label="formMap['xddm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.xddm" placeholder="请选择任教学段">
                        <el-option v-for="xx of types.xddms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="xbm" :label="formMap['xbm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.xbm" placeholder="请选择性别">
                        <el-option v-for="xx of types.xbms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align:center;">
                <el-button style="max-width: 400px;" type="primary" class="form-btn" @click="submit" v-if="!disabled">提 交</el-button>
            </el-col>
        </el-form>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            qxdm: '区县',
            xxdm: '学校',
            xm: '姓名',
            shouji: '手机',
            rjkcdm: '任教课程',
            xxzwdm: '学校职务',
            zcdm: '职称',
            csrq: '出生日期',
            xddm: '任教学段',
            xbm: '性别'
        };
    new Vue({
        el: '#app',
        data: function () {
            var that = this, validate = [
                {
                    required: true,
                    validator(filed, val, callback) {
                        if (!val) {
                            callback(new Error(formMap[filed.fullField] + '不能为空'))
                        }
                        callback()
                    },
                    trigger: 'blur'
                }
            ]
            return {
                title: '教师信息',
                isRegister: getQueryString('register'),
                formMap,
                type: getQueryString("type"),
                uid: getQueryString("xuid"),
                pzluserid: '',
                types: {
                    qxdms: [],
                    xxdms: [],
                    kcdms: [],
                    zwdms: [],
                    zcdms: [],
                    xddms: [],
                    xbms: []
                },
                formData: {
                    qxdm: '', // 区县
                    xxdm: '', // 学校
                    xm: '', // 姓名
                    shouji: '', // 手机
                    rjkcdm: '', // 任教课程
                    xxzwdm: '', // 学校职务
                    zcdm: '', // 职称
                    csrq: '', // 出生日期
                    xddm: '', // 任教学段
                    xbm: '' // 性别
                },
                rules: {
                    qxdm: validate, // 区县
                    xxdm: validate, // 学校
                    xm: validate, // 姓名
                    shouji: validate, // 手机
                    rjkcdm: validate, // 任教课程
                    xxzwdm: validate, // 学校职务
                    zcdm: validate, // 职称
                    csrq: validate, // 出生日期
                    xddm: validate, // 任教学段
                    xbm: validate // 性别
                }
            }
        },
        computed: {
            disabled () {
                return this.type === 'show'
            }
        },
        methods: {
            back () {
                if (this.isRegister) {
                    location.href = './'
                } else {
                    history.back()
                }
            },
            handleChange (val) {
                this.getTypes('gb-xxdm', val)
                this.formData.xxdm = ''
            },
            getProjects () {
                let that = this
                if (this.uid) {
                    that.getInitData()
                } else {
                    axios.get(baseUrl + 'PSJS/PSJSDETAI', {params: {act: 'pinit'}}).then(function (res) {
                        if (res.status === 200) {
                            that.title = res.data.mkmc || that.title
                            document.title = that.title
                            that.pzluserid = res.data.pzluserid
                            that.getInitData()
                        }
                    })
                }
            },
            getInitData () {
                let that = this
                axios.get(baseUrl + 'PSJS/PSJSDETAI', {params: {act: 'rdata', pageparm: that.uid || that.pzluserid}}).then(function (res) {
                    if (res.status === 200 && res.data.length > 0) {
                        that.formData = res.data[0]
                        if (that.formData.qxdm) {
                            that.getTypes('gb-xxdm', that.formData.qxdm)
                        }
                    }
                })
            },
            submit() {
                var that = this
                this.$refs.form.validate(function (flag) {
                    if (flag) {
                        var params = {
                            act: that.type,
                            pageparm: that.uid || that.pzluserid,
                            qxdm: that.formData.qxdm, // 区县
                            xxdm: that.formData.xxdm, // 学校
                            xm: that.formData.xm, // 姓名
                            shouji: that.formData.shouji, // 手机
                            rjkcdm: that.formData.rjkcdm, // 任教课程
                            xxzwdm: that.formData.xxzwdm, // 学校职务
                            zcdm: that.formData.zcdm, // 职称
                            csrq: that.formData.csrq, // 出生日期
                            xddm: that.formData.xddm, // 任教学段
                            xbm: that.formData.xbm // 性别
                        }
                        axios.get(baseUrl + 'PSJS/PSJSDETAI', {params}).then(function (res) {
                            if (res.status === 200) {
                                that.$message.success(res.data.xmsg || '成功!')
                                setTimeout(function () {
                                    that.back()
                                }, 1000)
                            }
                        })
                    }
                })
            },
            getTypes (type, dmleft) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type, {params: {dmleft}}).then(function (res) {
                    if (res.status === 200) {
                        if (type === 'gb-qxdm') {
                            var qxdms = [], qxdmMap = {}, second = {}
                            res.data.forEach(function (item) {
                                var key = item.dmdm.substring(0, item.dmdm.length - 2)
                                if (item.dmdm.length === 2) { // 第一层逻辑
                                    if (!qxdmMap[item.dmdm]) {
                                        qxdmMap[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        qxdmMap[item.dmdm].dmdm = item.dmdm
                                        qxdmMap[item.dmdm].dmmc = item.dmmc
                                    }

                                } else if (item.dmdm.length === 4) { // 第二层逻辑
                                    if (!qxdmMap[key]) {
                                        qxdmMap[key] = {
                                            children: []
                                        }
                                    }
                                    if (!second[item.dmdm]) {
                                        second[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        second[item.dmdm].dmdm = item.dmdm
                                        second[item.dmdm].dmmc = item.dmmc
                                    }
                                    qxdmMap[key].children.push(second[item.dmdm])
                                } else {
                                    if (!second[key]) {
                                        second[key] = {
                                            children: []
                                        }
                                    }
                                    second[key].children.push({
                                        dmdm: item.dmdm,
                                        dmmc: item.dmmc
                                    })
                                }
                            })
                            for (var k in qxdmMap) {
                                if (qxdmMap.hasOwnProperty(k) && qxdmMap[k]) {
                                    console.log(qxdmMap[k])
                                    qxdms.push(qxdmMap[k])
                                }
                            }
                            that.types[type.split('-')[1] + 's'] = qxdms
                            console.log(qxdms)
                        } else {
                            that.types[type.split('-')[1] + 's'] = res.data
                        }
                    }
                })
            }
        },
        created() {
            this.getProjects()
            this.getTypes('gb-qxdm')
            this.getTypes('xx-kcdm')
            this.getTypes('xx-zwdm')
            this.getTypes('gb-zcdm')
            this.getTypes('gb-xddm')
            this.getTypes('gb-xbm')
        }
    })
</script>

</html>